<template>
	<div class="container">
		<div class="list-box">
			<div class="top-text">我的消息</div>

			<el-dropdown class="status-container" trigger="click">
				<div>
					<span>{{showTypeText}}</span>
					<i class="el-icon-caret-bottom" />
				</div>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item divided @click.native="statusChange(0)">
						<span>全部消息</span>
					</el-dropdown-item>
					<el-dropdown-item divided @click.native="statusChange(1)">
						<span>通知</span>
					</el-dropdown-item>
					<el-dropdown-item divided @click.native="statusChange(2)">
						<span>公告</span>
					</el-dropdown-item>
					<!-- <el-dropdown-item divided @click.native="statusChange(3)">
						<span>告警</span>
					</el-dropdown-item> -->
				</el-dropdown-menu>
			</el-dropdown>
			<el-form :model="query" ref="queryForm" v-show="showSearch" :inline="true">
				<el-form-item label>
					<common-input v-model="query.noticeContent" placeholder="查询消息" clearable  />
				</el-form-item>

				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
				</el-form-item>
			</el-form>

			<div v-for="item of list" :key="item.noticeId" class="msg-div" @click="detail(item)">
				<div class="msg-left2" v-if="item.noticeType==1">通知</div>
				<div class="msg-left3" v-if="item.noticeType==2">公告</div>
				<div class="msg-left1" v-if="item.noticeType==3">告警</div>
				<div class="msg-right">
					<div class="msg-title">{{ item.noticeTitle }}</div>
					<div class="msg-content"  v-html="item.noticeContent"></div>
					<div class="msg-time">{{ item.createTime }}</div>
				</div>

				<div class="msg-line"></div>
			</div>
		</div>


		<el-dialog title="查看详情" :visible.sync="dialogShow" width="800px" append-to-body>

			<p class="detail-title">{{showItem.noticeTitle}}</p>
			<!-- <p class="detail-content">{{showItem.noticeContent}}</p> -->
			<div class="detail-content" v-html="showItem.noticeContent"></div>
			<div
				slot="footer"
				class="dialog-footer"
				style="padding-top: 10px;border-top: 1px solid #eee;"
			>
				<el-button @click="dialogShow=false">返 回</el-button>
			</div>
    	</el-dialog>
	</div>
</template>

<script>
import { notice_list } from "@/api/system/home.js";
export default {
	name: '',
	components: {},
	props: {},
	data() {
		return {
			dialogShow: false,
			showItem:{},
			showSearch: true, // 查询部分显示
			total: 1, // 总条数
			loading: false, // table 加载中
			list: [], // 数据列
			showTypeText:"全部消息",
			query: {
				pageNum: 1,
				pageSize: 10,
				noticeType:0,
			}, // 查询条件
		};
	},
	// 方法
	methods: {
		statusChange(noticeType){
			this.query.noticeType = noticeType;
			if(noticeType == 0){
				this.showTypeText = "全部消息";
			} else if(noticeType == 1){
				this.showTypeText = "通知";
			} else if(noticeType == 2){
				this.showTypeText = "公告";
			} else if(noticeType == 3){
				this.showTypeText = "告警";
			}
			this.getList();
		},
		detail(row) {
			this.dialogShow = true;
			this.showItem = row;
		},
		/**
		 * 获取列表
		 */
		getList() {
			let query = { ...this.query };
			notice_list(query).then(res => {
				this.list = res.rows;
				console.log("home", "" + JSON.stringify(res));
			});
		},
		/**
		 * 查询
		 */
		handleQuery() {
			this.query.pageNum = 1;
			this.getList();
		},
		/**
		 * 重置查询
		 */
		resetQuery() {
			this.query = this.$options.data().query;
		},
	},
	// 生命周期 - 创建完成（可以访问当前this实例）
	created() {
		this.getList();
	},
	// 生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {},
};
</script>
<style lang="scss" scoped>
.container {
  .list-box {
    width: 85%;
    margin: 30px auto 30px;
    clear: both;
    height: auto;
    overflow: hidden;
    padding: 20px;
    background: #ffffff;
    border-radius: 4px;
    .top-text {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20px;
	}
	.status-container{
		color: #1790FF;
		float: right;
		margin-right: 40px;
	}
    .msg-div {
      cursor:pointer;
      margin-top: 20px;
      .msg-line{
        clear: both;
        padding-top: 20px;
        border-bottom:1px solid #eee;
        height: 1px;
        width: 100%;
      }
      .msg-left1 {
        width: 70px;
        height: 70px;
        float: left;
        color: #f5232d;
        border: 1px solid #f5232d;
        border-radius: 4px;
        background: #fef0ef;
        text-align: center;
        line-height: 70px;
	  }
	  .msg-left2 {
        width: 70px;
        height: 70px;
        float: left;
        color: #58C622;
        border: 1px solid #58C622;
        border-radius: 4px;
        background: #F6FEED;
        text-align: center;
        line-height: 70px;
	  }
	  .msg-left3 {
        width: 70px;
        height: 70px;
        float: left;
        color: #722ED1;
        border: 1px solid #722ED1;
        border-radius: 4px;
        background: #F9F0FF;
        text-align: center;
        line-height: 70px;
      }
      .msg-right {
        width: 86%;
        float: left;
        margin-left: 20px;
        color: #000000;
        .msg-title {
          font-size: 15px;
          font-weight: bold;;
          line-height: 22px;
          overflow: hidden;
          text-overflow: ellipsis; //文本溢出显示省略号
          white-space: nowrap; //文本不会换行
        }
        .msg-content {
          font-size: 14px;
          color: #444444;
          overflow: hidden;
          text-overflow: ellipsis; //文本溢出显示省略号
          white-space: nowrap; //文本不会换行
        }
        .msg-time {
          font-size: 14px;
          line-height: 18px;
          color: #999;
        }
      }
    }
  }

}
.detail-title{
	font-weight: bold;
	color: black;
}
</style>
